<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的主页</title>
		<style>
			body {
				margin: 0;
				background-color: #f0fff0;
				/*height: 3000px;*/
				margin-top: 50px;
			}
			
			#banner {
				background-image: url(bg.jpg);
				width: 100%;
				height: 300px;
				background-position: 50% 50%;
			}
			
			#main {
				margin: 0 auto;
				width: 1000px;
				margin-bottom: 50px;
			}
			
			.photo {
				width: 100%;
				/*border-radius: 50%;*/
			}
			
			p {
				text-indent: 2em;
			}
			
			h1 {
				font-family: "楷体";
				text-align: center;
				padding-top: 120px;
				/*border: solid 1px red;*/
				margin: 0;
				font-weight: 700;
				
			}
			
			#classmate {
				background-image: url(banner.jpg);
				height: 500px;
				background-size: 100% 100%;
				position: relative;
			}
			
			#classmate1,
			#classmate2,
			#classmate3 {
				position: absolute;
				border-radius: 50%;
			}
			
			#classmate1 {
				width: 140px;
				left: 50px;
				top: 50px;
			}
			
			#classmate2 {
				width: 150px;
				left: 350px;
				top: 150px;
			}
			
			#classmate3 {
				width: 120px;
				left: 800px;
				top: 200px;
			}
			
			header {
				border: solid 1px black;
				height: 50px;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 2;
				background-color: #e0e0e0;
			}
			a{
				/*text-align: center;*/
				display: block;
				line-height: 40px;
				color: #000000;
				text-decoration: none;
				margin: 0 20px;
				border-radius: 10px;
				font-weight: 400;
/*				font-family: "bodoni mt";*/
			}
			a:hover{
				background-color: red;
				color: blue;
			}
			h2{
				color: chocolate;
				font-family: 宋体;
				font-weight: 900;
			}
			li{
				float: left;
				list-style: none;
				
			}
			ul{
				overflow: hidden;
				margin: 5px auto;
				width: 1000px;
			}
		</style>
	</head>

	<body>
		<header>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#school">我的学校</a></li>
				<li><a href="#hometown">我的家乡</a></li>
				<li><a href="#classmate">我的同学</a></li>
			</ul>
		</header>
		
		<!--<div id="title">
			<a href="#">首页</a>
			<a href="#school">我的学校</a>
			<a href="#hometown">我的家乡</a>
			<a href="#classmate">我的同学</a>
		</div>-->
		<div id="banner">
			<h1> 我的主页</h1>
		</div>
		<div id="bg">

		</div>
		<div id="main">
			<div>
				<h2 id="school">我的学校</h2>
				<p>黄河科技学院位于河南郑州。学校创立于1984年10月；1994年2月，经国家教育委员会批准建立民办黄河科技学院，实施高等专科学历教育；截至2017年4月，学校在郑州市有两个校区，在济源市建有一个校区，总占地2800多亩，校舍建筑面积100多万平方米，教学科研仪器设备价值2.4亿元，馆藏图书300万册；有全日制在校生30000余人。</p>
				<img class="photo" src="school.png" />
			</div>
			<hr>
			<div>
				<h2 id="hometown">我的家乡</h2>
				<p>南阳，古称宛，河南省辖市，位于河南省西南部、豫鄂陕三省交界地带，因地处伏牛山以南，汉水以北而得名。全市现辖2个行政区、4个开发区、10个县、1个县级市。总面积2.66万平方公里，是河南省面积最大、人口最多的城市。</p>
				<img class="photo" src="nanyang.jpg" />
			</div>
			<hr />

			<div>
				<h2>我的同学</h2>
				<p>我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学我的同学</p>
				<div id="classmate">
					<img id="classmate1" src="1120617_004016312_2.jpg" />
					<img id="classmate2" src="844649_165732385303_2.jpg" />
					<img id="classmate3" src="b163488a5bd1.jpg" />
				</div>
			</div>
		</div>
	</body>

</html>